import React, { Component } from 'react'
import './index.less'
import { Form, Input, Button, Row, Col, DatePicker } from 'antd';
import moment from 'moment'
const FormItem = Form.Item;

class WeeklyForm3 extends Component {

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.submit(values, {type1: 'data3', type2: 'modifyRecord3', type3: 'modalVisible3'});
      }
    });
  }

  close = () => {
    if (this.props.modifyRecord) {
      this.props.modifyRecord.buildDate = moment(this.props.modifyRecord.buildDate).format('YYYY-MM-DD');
    }
    this.props.close();
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
    };
    return (
      <Form onSubmit={this.handleSubmit} className="weekly-form">
        <Row gutter={40} className="weekly-form-row">
            <Col span={12}>
            <FormItem label="序号" {...formItemLayout}>
                {getFieldDecorator('index', {
                  rules: [{ required: true, message: '请输入序号！' }],
                  initialValue: this.props.modifyRecord.index || this.props.index
                })(
                  <Input placeholder="序号" disabled />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="培训内容" {...formItemLayout}>
                {getFieldDecorator('name', {
                  rules: [{ required: true, message: '请输入培训内容！' }],
                  initialValue: this.props.modifyRecord.name
                })(
                  <Input placeholder="培训内容" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="培训目的" {...formItemLayout}>
                {getFieldDecorator('target', {
                  rules: [{ required: true, message: '请输入培训目的！' }],
                  initialValue: this.props.modifyRecord.target
                })(
                  <Input placeholder="培训目的" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="培训时间" {...formItemLayout}>
                {getFieldDecorator('buildDate', {
                  rules: [{ required: true, message: '请输入项目预期时间！' }],
                  initialValue: this.props.modifyRecord.buildDate
                })(
                  <DatePicker placeholder="培训时间" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="完成情况" {...formItemLayout}>
                {getFieldDecorator('result', {
                  rules: [{ required: true, message: '请输入完成情况' }],
                  initialValue: this.props.modifyRecord.result
                })(
                  <Input placeholder="完成情况" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="培训质量" {...formItemLayout}>
                {getFieldDecorator('grade', {
                  rules: [{ required: true, message: '请输入培训质量' }],
                  initialValue: this.props.modifyRecord.grade
                })(
                  <Input placeholder="培训质量" />
                )}
              </FormItem>
            </Col>
        </Row>
        <Row>
          <Col className="butttn-group" span={24}>
            <Button type="primary" htmlType="submit">
                添加
            </Button>
            <Button style={{marginLeft: 15}} type="primary" onClick={this.close}>取消</Button>
          </Col>
        </Row>
    </Form>
    )
  }
}
export default Form.create()(WeeklyForm3);
